<html lang="zh-cn">
<head>
{% include "tdm_include_head_template.html" %}
<link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
</head>

<body class=" theme-blue">
{% include "tdm_include_navbar_template.html" %}

<div class="container">
  <br/>
  {% include "tdm_include_error_template.html" %}
  {% include "tdm_include_report_navbar_template.html" %}

  <div class="form-context">
  <div class="row">
    <div class="col-lg-3 col-sm-12">
      <form name="report_form" class="form-horizontal" action="/tdm/report/" method="post">
      <div class="form-group">
        <label for="city_select" class="col-sm-4 control-label">城市</label>
        <div class="col-sm-8">
          <select name="city_select" id="city_select" class="form-control">
            {% for city in city_all %}
            <option value="{{city.name}}" {% ifequal city.name view_city.name %}selected="selected"{% endifequal %}>{{city.name}}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label for="start_date" class="col-sm-4 control-label">开始日期</label>
        <div class="col-sm-8">
          <div data-link-format="yyyy-mm-dd" data-link-field="dtp_input2" data-date-format="yyyy-mm-dd" class="input-group date form_date">
            <input id="start_date" name="start_date" type="text" readonly="" value="" size="16" class="form-control">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
          <input type="hidden" value="" id="dtp_input2">
        </div>
      </div>
      <div class="form-group">
        <label for="end_date" class="col-sm-4 control-label">结束日期</label>
        <div class="col-sm-8">
          <div data-link-format="yyyy-mm-dd" data-link-field="dtp_input2" data-date-format="yyyy-mm-dd" class="input-group date form_date">
            <input id="end_date" name="end_date" type="text" readonly="" value="" size="16" class="form-control">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
          <input type="hidden" value="" id="dtp_input2">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-8 col-sm-offset-4">
          <button id="op" name="op" value="report" type="button" class="btn btn-primary btn-block">提交</button>
        </div>
      </div>
    </div>
    <div class="col-lg-9 col-sm-12" id="report_main">
    </div>
  </div>
  </form>
  </div>

  {% include "tdm_include_footer_template.html" %}
</div>

<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
function refresh_acard_report(city, date) {
  var venue_report_view = '<div class="row"><div class="col-lg-4"><div id="city_report" style="min-width:300px;height:300px"></div></div>';
  var url = '/tdm/json/report/acard/'+city+'/'+date+'/';
  var venue_flot_list = [];
  var city_pie_data = [];
  $.getJSON(url, function (data) {
    $.each(data, function(i, vn_rep) {
      venue_report_view += '<div class="col-lg-4"><div id="'+vn_rep.vn_id+'" style="min-width:300px;height:300px"></div></div>';
      var pip_data = new Object();
      pip_data.vn_id = vn_rep.vn_id;
      pip_data.vn_name = vn_rep.vn_name;
      pip_data.ret_true = vn_rep.rep_true;
      pip_data.ret_false = vn_rep.rep_false;
      venue_flot_list.push(pip_data);
      city_pie_data.push([vn_rep.vn_name, vn_rep.rep_false]);
    });
    //console.log(venue_report_view);
    console.log(city_pie_data);
    venue_report_view += "</div>";
    $("#report_main").html(venue_report_view);
    //console.log(venue_flot_list);
    pie_show('#city_report', city, [{name:'中控机故障比', data:city_pie_data}]);
    $.each(venue_flot_list, function(i, d) {
      //console.log($('#'+d.vn_id));
      pie_data = [{name:'中控机故障率', data:[['正常', d.ret_true], ['异常', d.ret_false]]}];
      pie_show('#'+d.vn_id, d.vn_name, pie_data);
    });
  });
}
$(function() {
  sidebar_nav_clone();
  $('.form_date').datetimepicker({
    language:  'en',
    autoclose: 1,
    startView: 2,
    minView: 2,
    todayHighlight: true,
    language: "zh-CN",
    initialDate: new Date()
  });
  $("button#op").click(function() {
    var city_select = $("#city_select").val();
    var date_select = $("#date_select").val();
    if (!city_select) {
      alert("请选择一个城市");
      return false;
    }
    if (!date_select) {
      alert("请选择日期");
      return false;
    }
    refresh_acard_report(city_select, date_select);
  });
});
</script>
</body>
</html>
